<template>
  <ul class="bw-design-left-side-toolbar">
    <li
      v-for="item in toolbarList"
      :key="item.id"
      :id="item.id"
      :class="['toolbar-item', current === item.id && 'toolbar-item-select']"
      @click="current = item.id"
    >
      <a-tooltip placement="right" :title="item.title">
        <Icon :icon="item.icon" />
      </a-tooltip>
    </li>
  </ul>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

import type { BwSideToolbarModel } from './model'
interface BwSideToolbarProps {
  value?: string
}

const emit = defineEmits(['update:value'])
const props = withDefaults(defineProps<BwSideToolbarProps>(), {
  value: 'com',
})

const current = computed({
  get: () => props.value,
  set: (value) => emit('update:value', value),
})

const toolbarList = computed(
  (): Array<BwSideToolbarModel> => [
    {
      id: 'dom',
      title: '大纲树',
      icon: 'ant-design:unordered-list-outlined',
    },
    {
      id: 'com',
      title: '组件库',
      icon: 'ant-design:appstore-outlined',
      tabs: [
        { id: 'base', title: '基础组件' },
        { id: 'custom', title: '自定义组件' },
      ],
    },
    {
      id: 'baseInfo',
      title: '基础信息',
      icon: 'ant-design:setting-outlined',
    },
    {
      id: 'logic',
      title: '代码',
      icon: 'ant-design:form-outlined',
    },
    {
      id: 'css',
      title: '样式',
      icon: 'ant-design:edit-outlined',
    },
    {
      id: 'config',
      title: '配置端设置',
      icon: 'ant-design:radius-setting-outlined',
    },
  ]
)
</script>

<style lang="less" scoped>
.bw-design-left-side-toolbar {
  margin: 0;
  padding: 0;
  width: 39px;
  height: 100%;
  list-style: none;
  display: inline-flex;
  flex-direction: column;
  border-right: 1px solid #e8e8e8;

  .toolbar-item {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .toolbar-item-select {
    color: #0960bd;
  }
}
</style>
